<!-- 字典 新增/修改 -->
<template>
  <div>
    <el-dialog :title="dictData.title" :visible.sync="dictData.showModal" width="650px" top="5vh">
      <el-form label-width="90px" :model="data" ref="update" :rules="rules" v-loading="showLoading" element-loading-text="数据加载中">
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="代号" prop="code">
              <el-input size="medium" placeholder="请输入代号" v-model="data.code"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="名称" prop="name">
              <el-input size="medium" placeholder="请输入名称" v-model="data.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="排序" prop="sort">
              <el-input size="medium" placeholder="请输入排序" v-model="data.sort"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="类型" prop="type">
              <el-input size="medium" placeholder="请输入类型" :disabled="dictData.type=='edit'" v-model="data.type"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="类型名称" prop="typeName">
              <el-input size="medium" placeholder="请输入类型名称" v-model="data.typeName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <!-- 底部按钮开始 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="add">提交</el-button>
        <el-button size="medium" @click="dictData.showModal = false">取消</el-button>
      </span>
      <!-- 底部按钮结束 -->
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["dictData"],
  data () {
    return {
      showLoading: false, //是否显示loading
      title: "", //标题
      //需要提交的数据
      data: {
        name: "",
        code: "",
        sort: "",
        typeName: "",
        type: "",
      },
      //表单校验
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        code: [
          { required: true, message: "代号不能为空", trigger: "blur" }
        ],
        sort: [
          { required: true, message: "排序不能为空", trigger: "blur" }
        ],
        typeName: [{ required: true, message: "类型名称不能为空", trigger: "blur" }],
        type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
      }
    };
  },
  methods: {
    //新增、修改字典
    add () {
      this.$refs["update"].validate(async valid => {
        if (valid) {
          this.showLoading = true;
          let url =
            this.dictData.type == "create"
              ? "/dict/save"
              : "/dict/update";
          let httpMethod = this.dictData.type == "create" ? "POST" : "PUT";
          let result = await this.request.httpRequest(
            httpMethod,
            url,
            this.data
          );
          if (result.code == 200) {
            this.dictData.showModal = false;
            this.$message({ type: "success", message: result.msg });
            this.$emit("close");
          } else {
            this.$message({ type: "error", message: result.msg });
          }
          this.showLoading = false;
        }
      });
    },
    //获取详情
    async getDetail () {
      if (this.dictData.roleId) {
        let url = `/dict/get/${this.dictData.roleId}`;
        let result = await this.request.httpRequest("GET", url);
        if (result.code == 200) {
          this.data.name = result.data.name;
          this.data.code = result.data.code;
          this.data.sort = result.data.sort;
          this.data.typeName = result.data.typeName;
          this.data.type = result.data.type;
        } else {
          this.$message({ type: "error", message: result.msg });
        }
      }
    },
  },
  mounted () {
    this.getDetail();


  }
};
</script>
